<template>
	<div>
		<div class="jijian_detail_wrap">
			<div class="h_w">
				<div class="h_c padding_left bgd_color font_size_t">
					寄件详情
				</div>
				<el-row :gutter="20">
					<el-col :span="6">
						<div class="grid-content bg-purple">
							<label>快递公司：</label> {{expressCompanyName}}
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content bg-purple">
							<label>运单号：</label> {{waybillNumber}}
						</div>
					</el-col>
				</el-row>
			</div>
			<div class="h_w font_size_c">
				<div class="h_c padding_left border_btm">
					<img src="../../assets/images/bitian_icon.png" /> 寄件人信息
				</div>
				<el-row :gutter="20">
					<el-col :span="6">
						<div class="grid-content bg-purple">
							<label>寄件人：</label> {{senderName}}
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content bg-purple">
							<label>寄件人电话：</label> {{senderMobile}}
						</div>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="20">
						<div class="grid-content bg-purple detail_adr_wrap">
							<label>寄件地址：</label>
							<span>{{senderProvince}}{{senderCity}}{{senderArea}}{{senderDetail}}</span>
						</div>
					</el-col>
				</el-row>
			</div>
			<div class="h_w font_size_c">
				<div class="h_c padding_left border_btm">
					<img src="../../assets/images/bitian_icon.png" />
					<span>收件人信息</span>
				</div>
				<el-row :gutter="20">
					<el-col :span="6">
						<div class="grid-content bg-purple">
							<label>收件人：</label> {{receiverName}}
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content bg-purple">
							<label>收件人电话：</label> {{receiverMobile}}
						</div>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="20">
						<div class="grid-content bg-purple detail_adr_wrap">
							<label>收件地址：</label>
							<span>{{receiverProvince}}{{receiverCity}}{{receiverArea}}{{receiverDetail}}</span>
						</div>
					</el-col>
				</el-row>
			</div>
			<div class="h_w font_size_c">
				<div class="h_c padding_left border_btm">
					<img src="../../assets/images/bitian_icon.png" />
					<span>包裹信息</span>
				</div>
				<el-row :gutter="20">
					<el-col :span="6">
						<div class="grid-content bg-purple">
							<label>包裹类型：</label> {{mailType}}
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content bg-purple">
							<label>重量：</label> {{weight}}kg
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content bg-purple">
							<label>运费：</label> {{freight}}元
						</div>
					</el-col>
				</el-row>
			</div>
			<div class="print_btn_wrap">
				<el-button @click="confirmPrint2" type="primary">确认并打印面单</el-button>
			</div>
		</div>
		<div id="subOutputRank-print" style="display: none;">
			<div v-html="printTemplate">
				
			</div>
		</div>
	</div>
</template>
<script>
	import http from '@/assets/js/http.js'
	export default {
		data() {
			return {
				printTemplate: '', //打印的内容
				mailId: '',
				expressCompanyName: '',
				waybillNumber: '',
				senderName: '', //寄件人姓名
				senderMobile: '', //寄件人电话
				senderProvince: '', //寄件地址 - 省份
				senderCity: '', //寄件地址 - 城市
				senderArea: '', //寄件地址 - 区县
				senderDetail: '', //寄件地址 - 详细地址
				receiverName: '', //收件人姓名
				receiverMobile: '', //收件人电话
				receiverProvince: '', //收件地址 - 省份
				receiverCity: '', //收件地址 - 城市
				receiverArea: '', //收件地址 - 区县
				receiverDetail: '', // 收件地址 - 详细地址
				mailType: '', //包裹类型
				weight: '', //重量
				freight: '', //运费

			};
		},
		created() {
			let that = this;
			console.log('this.$route', this.$route.query.mailId)
			that.mailId = this.$route.query.mailId
			that.apiGet("/api/backend/site/sender-mail/detail?mailId=" + that.mailId).then(res => {
				if(res.code == 200) {
					that.expressCompanyName = res.data.expressCompanyName
					that.waybillNumber = res.data.waybillNumber
					that.senderName = res.data.senderName //寄件人姓名
					that.senderMobile = res.data.senderMobile //寄件人电话
					that.senderProvince = res.data.senderProvince //寄件地址 - 省份
					that.senderCity = res.data.senderCity //寄件地址 - 城市
					that.senderArea = res.data.senderArea //寄件地址 - 区县
					that.senderDetail = res.data.senderDetail //寄件地址 - 详细地址
					that.receiverName = res.data.receiverName //收件人姓名
					that.receiverMobile = res.data.receiverMobile //收件人电话
					that.receiverProvince = res.data.receiverProvince //收件地址 - 省份
					that.receiverCity = res.data.receiverCity //收件地址 - 城市
					that.receiverArea = res.data.receiverArea //收件地址 - 区县
					that.receiverDetail = res.data.receiverDetail // 收件地址 - 详细地址
					that.mailType = res.data.mailType //包裹类型
					that.weight = res.data.weight //重量
					that.freight = res.data.freight //运费

				}
			})
		},
		methods: {
			handleItemChange(val) {

			},
			printContent() {
				let subOutputRankPrint = document.getElementById('subOutputRank-print');
				console.log(subOutputRankPrint.innerHTML);
				let newContent = subOutputRankPrint.innerHTML;
				let oldContent = document.body.innerHTML;
				document.body.innerHTML = newContent;
				window.print();
				window.location.reload();
				document.body.innerHTML = oldContent;
				return false;
			},
			confirmPrint2() {
				let that = this;
				that.apiGet('/api/help/eorder/send?mailId=' + this.mailId).then(res => {
					if(res.code == 200) {
						if(res.data.ResultCode == 100 || res.data.ResultCode == 106) {
							that.printTemplate = res.data.PrintTemplate;
							setTimeout(function() {
								that.printContent();
							}, 1000)
						}
					}
				})
			},

		},
		mixins: [http]
	}
</script>
<style scoped>
	.padding_left {
		padding-left: 20px;
	}
	
	.jijian_detail_wrap .h_w {
		background: #fff;
		border-radius: 3px;
		margin-bottom: 20px;
		padding-bottom: 20px;
	}
	
	.jijian_detail_wrap .h_c {
		line-height: 40px;
	}
	
	.bgd_color {
		background: rgba(24, 144, 255, 1);
		color: #FFFFFF;
	}
	
	.jijian_detail_wrap .el-row {
		padding-left: 20px;
		padding-top: 20px;
	}
	
	.border_btm {
		border-bottom: 1px solid rgba(217, 217, 217, 1);
		font-weight: bold;
    	font-size: 16px;
	}
	
	.font_size_t {
		font-size: 18px;
	}
	
	.font_size_c {
		font-size: 14px;
	}
	
	.h_w .el-input {
		width: 200px;
	}
	
	.h_w .detail_adr_wrap .el-input {
		width: 400px;
	}
	
	.print_btn_wrap {
		text-align: center;
		padding: 10px 0 50px;
	}
	
	.print_btn_wrap .el-button {
		font-size: 20px;
	}
	label {
		color: #666;
	}
</style>